<template>
	<z-paging-swiper class="page">

		<view class="uni-padding-wrap uni-common-mt">
			<z-tabs ref="tabsRef" scroll-count="1" :list="tabsList" :current="currentIndex" @change="changeTab"
				value-key="id" :active-style="{'font-size':'30rpx','font-weight':'600','color': '#333333'}"
				:inactive-style="{'font-size':'30rpx','color': '#666666','font-weight':'400'}" />
		</view>
		<swiper class="swiper" :current="currentIndex" @change="onChange" @transition="swiperTransition"
			@animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
				<!-- 修改这里：为每个swiper-item添加独立的滚动容器 -->
				<scroll-view class="content-scroll" scroll-y="true">
					<view class="content-box">
						<AllreportRecordVue v-if="index === 0" />
						<HandlereportRecordVue v-if="index === 1" />
						<CompletedreportRecordVue v-if="index === 2" />
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref,
		onMounted
	} from "vue";
	import AllreportRecordVue from './AllreportRecord.vue'
	import HandlereportRecordVue from './HandlereportRecord.vue'
	import CompletedreportRecordVue from './CompletedreportRecord.vue'

	import {
		onShow
	} from '@dcloudio/uni-app';

	const tabsRef = ref(null);

	const state = reactive({
		tabsList: [{
				id: 0,
				name: '全部'
			},
			{
				id: 1,
				name: '处理中'
			},
			{
				id: 2,
				name: '已完成'
			}
		],
		currentIndex: 0,
		currentId: 0,
	});

	const {
		tabsList,
		currentIndex,
		currentId
	} = toRefs(state);


	// 初始加载全部订单
	onShow(() => {

	})
	onMounted(() => {

	})



	const changeTab = (index, id) => {
		currentIndex.value = index;
		currentId.value = id;
	};

	const onChange = (e) => {
		// console.log('e',e);
		currentIndex.value = e.detail.current;
		currentId.value = tabsList.value[e.detail.current].id;
	};

	// swiper滑动中
	const swiperTransition = (e) => {
		tabsRef.value.setDx(e.detail.dx);
	};

	// swiper滑动结束
	const swiperAnimationfinish = (e) => {
		currentIndex.value = e.detail.current;
		currentId.value = tabsList.value[e.detail.current].id;
		tabsRef.value.unlockDx();
	};
</script>

<style lang="scss" scoped>
	.page {
		/* 关键：让整个页面容器占满屏幕 */
		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;
		/* 避免外层多余滚动 */

		.uni-common-mt {
			margin-top: 10px;
			background-color: #fff;
		}

		.swiper {
			/* 关键：swiper高度设为屏幕剩余高度（减去tabs高度） */
			height: calc(100vh - 100rpx);
			/* 假设tabs高度为100rpx，根据实际调整 */
			background-color: #f5f5f5;
		}

		.content-scroll {
			height: 100%;
			/* 继承swiper高度 */
		}

		.content-box {
			min-height: 100%;
			/* 确保内容足够高 */
			// padding-bottom: 200rpx;
			/* 底部留白 */
			background-color: #f5f5f5;
		}

		::v-deep .z-tabs-list {
			width: 100% !important;
			justify-content: space-evenly !important;
		}
	}
</style>